<template>
  <div class='container'>
    <div class="app-container">
        <el-card shadow="never">
          <!-- 筛选 -->
          <el-form :inline="true" :model="form"  ref="form" >
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="form.keyword" placeholder="关键字"></el-input>
            </el-form-item>
            <el-form-item label="状态：" prop="state">
              <el-select style="width: 180px;" v-model="form.state" @keyup.enter="handleFilter">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="info" @click="resetForm('form')">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="findList">查询</el-button>
            </el-form-item>

            <el-button
              size="small"
              style="float: right"
              @click="hAddArticle"
              type="success"
              icon="el-icon-edit">新增技巧
            </el-button>
          </el-form>
          <!-- 数据记录 -->
          <el-alert
            v-if="cResultTip"
            :title="cResultTip"
            type="info"
            class="alert"
            :closable="false"
            show-icon>
          </el-alert>
          <!-- end -->
          <!-- 数据 -->
          <el-table
            :key="tableKey"
            :data="dataList"
            v-loading="listLoading"
            element-loading-text="给我一点时间"
            fit
            highlight-current-row
            style="width: 100%">
            <el-table-column type="index" label='序号' width="80"></el-table-column>
            <el-table-column  width="400" label="文章标题">
              <template slot-scope="scope">
                <span>{{scope.row.title}}</span>
                <span v-if="scope.row.videoURL" @click="playVideo(scope.row.videoURL)" class="el-icon-video-camera"></span>
              </template>
            </el-table-column>
            <el-table-column label="阅读数" prop="visits"></el-table-column>
            <el-table-column label="录入人" prop="username"></el-table-column>
            <el-table-column label="录入时间" width="170">
              <template slot-scope="scope">
                {{scope.row.createTime | handleTime}}
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.state === 1">已启用</span>
                <span v-else>已禁用</span>
              </template>
            </el-table-column>
            <!-- 操作按钮 -->
            <el-table-column
              align="center"
              label="操作"
              width="280"
              class-name="small-padding fixed-width">
              <template class="btnList" slot-scope="scope">
                <el-button type="text" size="mini" @click="handlePreview(scope.row.id)">预览</el-button>
                <el-button type="text" size="mini" @click="handleStatus(scope.row)">
                  <span v-if="scope.row.state === 0">启用</span>
                  <span v-else>禁用</span>
                </el-button>
                <el-button type="text" size="mini" v-if="scope.row.state === 0" disabled @click="handleChange(scope.row.id)">修改</el-button>
                <el-button type="text" size="mini" v-else-if="scope.row.state === 1" @click="handleChange(scope.row.id)">修改</el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="removeArt(scope.row.id)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- end -->
          <!-- 分页 -->
          <div class="pagination">
            <div class="pages">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="Number(reqParams.page)"
                :total="Number(total)"
                :page-size="Number(reqParams.pagesize)"
                :page-sizes="[10,20,30, 50]"
                layout="sizes, prev, pager, next, jumper">
              </el-pagination>
            </div>
          </div>
          <!-- end -->
          <!-- 新增标签弹层 -->
          <el-dialog :title="cTitle"
            :visible.sync="isShowDialog"
            v-if="isShowDialog">
            <articles-add
              @close="isShowDialog = false"
              :articleId="curArticleId"
              @refresh="getList(1)">
            </articles-add>
          </el-dialog>

          <!-- 新增标签弹层 -->
          <el-dialog title="预览文章"
            width='42%'
            :visible.sync="isShowPreview"
            v-if="isShowPreview">
            <articles-preview
              @close="isShowPreview = false"
              :articleId="curArticleId">
            </articles-preview>
          </el-dialog>

          <!-- 视频 -->
          <div class="videoContainer" :style="videoHide">
            <div class="close el-icon-close" @click="closeVideo"></div>
            <div class="box">
              <video :src="videoUrl"  autoplay class="video"></video>
            </div>
          </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import { list, changeState, remove } from '@/api/hmmm/articles'
import { rTime } from '@/filters/index'
import ArticlesAdd from '../components/articles-add'
import ArticlesPreview from '../components/articles-preview'

export default {
  components: {
    ArticlesAdd,
    ArticlesPreview
  },
  data () {
    return {
      alertText: '',
      tableKey: 0,
      total: 0,
      listLoading: false,
      dataList: [],
      searchContent: null,
      searchState: null,
      reqParams: {
        page: 1,
        pagesize: 10
      },
      form: {
        state: null,
        keyword: null
      },
      curArticleId: '',
      isShowDialog: false,
      isShowPreview: false,
      videoUrl: '',
      videoHide: 'display: none'
    }
  },
  filters: {
    handleTime: function (time) {
      return rTime(time)
    }
  },
  methods: {
    // 重置表单
    resetForm (formName) {
      // 此处传入的是值名的字符串，非值本身
      this.$refs[formName].resetFields()
    },
    // 获取列表信息
    async getList (page) {
      if (page !== undefined) {
        this.reqParams.page = 1
      }
      this.listLoading = true
      try {
        const { data: res } = await list(this.reqParams)
        this.dataList = res.items
        // 获取总条数
        this.total = res.counts
        this.alertText = `共 ${this.total} 条记录`
        this.listLoading = false
      } catch (error) {
        this.$message.error('查询列表失败')
      }
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.reqParams.pagesize = val
      if (this.reqParams.page === 1) {
        this.getList(this.reqParams)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.reqParams.page = val
      this.reqParams.keyword = this.searchContent
      this.reqParams.state = this.searchState
      this.getList()
    },
    // 筛选查询
    findList () {
      this.searchContent = this.form.keyword
      this.searchState = this.form.state
      this.reqParams.page = 1
      this.reqParams.keyword = this.form.keyword
      this.reqParams.state = this.form.state
      this.getList()
    },
    // 禁用or启用
    async handleStatus (val) {
      var data = {
        id: val.id,
        state: val.state === 0 ? 1 : 0
      }
      try {
        await changeState(data)
        this.$message.success('操作成功')
        this.getList()
      } catch {
        this.$message.error('操作失败')
      }
    },
    // 删除
    removeArt (id) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await remove({ id: id })
          this.$message.success('删除成功')
          this.getList()
        } catch {
          this.$message.error('删除失败')
        }
      }).catch(() => {
        this.$message.info('已取消操作!')
      })
    },
    // 添加
    hAddArticle () {
      this.curArticleId = ''
      this.isShowDialog = true
    },
    // 修改
    handleChange (id) {
      this.curArticleId = id
      this.isShowDialog = true
    },
    loadArticle () {
      this.getList()
    },
    // 预览
    handlePreview (id) {
      this.curArticleId = id
      this.isShowPreview = true
    },
    // 播放视频
    playVideo (videoUrl) {
      this.videoHide = 'display'
      this.videoUrl = videoUrl
    },
    closeVideo () {
      this.videoHide = 'display:none'
      this.videoUrl = ''
    }
  },
  computed: {
    status () {
      return status
    },
    cTitle () {
      return this.curArticleId ? '编辑文章' : '添加文章'
    },
    cResultTip () {
      return `共 ${this.total} 条记录`
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style scoped rel="stylesheet/scss" lang='scss'>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.fixed-width .el-button--mini {
  width: 0px;
  font-size: 14px;
  margin-right: 10px;
}
.app-container {
  padding-left: 10px;
  padding-top: 10px;
}
.el-icon-video-camera {
  margin-left: 10px;
  font-size: 20px;
  color: #0009ff;
  cursor: pointer
}
.videoContainer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  overflow: hidden;
  z-index: 9999;
  .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%);
    background: rgba(0,0,0,.4);
    box-shadow: 0 0 5px rgba(0,0,0,.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    cursor: pointer
  }
  .box {
      width: 800px;
      height: 600px;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      .video {
        width: 100%;
        height: 100%;
      }
  }
  .el-icon-close {
    font-size: 25px;
  }
}
</style>
